<template>
 <div class="gradesetting_container">
  <Row>
      <Col span="24">
        <div class="nav">
            <h3 class="addcustomergroup_title">等级设置</h3>
        </div>
      </Col>
  </Row>
  <Row>
    <Col span="24">
       <div class="content_box">
           <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80" style="margin-top:2vh;">
                <FormItem label="等级体系开关：" :label-width="120">
                    <i-switch v-model="formValidate.statusBoolean" size="large">
                        <span slot="open">开</span>
                        <span slot="close">关</span>
                    </i-switch>
                </FormItem>
             <!--<RadioGroup v-model="formValidate.dateFrom">-->
                <FormItem label="数据有效范围：" :label-width="120" style="margin-top: 2vh;">
                    <Row>
                        <Col>
                            <!--<Radio label="accumulateStartDate" @on-change="disabled2 =! disabled2">-->
                            <span>从</span>
                            <DatePicker type="datetime" placeholder="请选择时间" format="yyyy-MM-dd HH:mm:ss" v-model="formValidate.accumulateStartDate" style="width: 200px" :disabled="!disabled2"></DatePicker>
                            <span>开始累计</span>
                            <!--</Radio>-->
                        </Col>
                    </Row>
                </FormItem>
                <FormItem prop="totalday">
                    <Row style="margin:2vh 0px 0px 2vw;">
                        <Col>
                           <!--<Radio label="accumulateNearestDays" @on-change="disabled2 =! disabled2">-->
                            <span>只累计最近</span>
                            <Input type="text" placeholder="请输入天数" v-model="formValidate.accumulateNearestDays" style="width: 200px" :disabled="!disabled2"></Input>
                            <span>天内数据累计</span>
                           <!--</Radio>-->
                        </Col>
                    </Row>
                </FormItem>
             <!--</RadioGroup>-->
                <FormItem label="等级计算字段：" :label-width="120" style="margin-top: 2vh;">
                  <CheckboxGroup v-model="formValidate.supportAccumulateFieldsArray">
                    <Checkbox label="1">消费金额</Checkbox>
                    <Checkbox label="2">消费次数</Checkbox>
                  </CheckboxGroup>
                </FormItem>
                <FormItem label="等级列表：" :label-width="120">
                    <Button type="primary" @click.native="Addgrade">新增等级</Button>
                    <Row style="width:80%;margin:2vh 0px 0px 0px;">
                        <Col>
                            <!-- <Table :loading="TableLoading" border :columns="columns7" :data="listdata"></Table> -->
                            <Table  border :columns="columns7" :data="data6"></Table>
                        </Col>
                    </Row>
                </FormItem>
           </Form>
           <Row type="flex" justify="center" style="margin:2vh 0px 0px 0px;">
               <Col>
                    <Button type="primary" @click="SavegradeList('formValidate')">生效</Button>
               </Col>
           </Row>
        </div>
    </Col>
  </Row>
  <Modal
        v-model="modal1"
        title="编辑"
        @on-ok="Editgrade">
      <Form :model="formItem" :label-width="80" ref="formItem" :rules="modalruleValidate" label-position="left">
        <FormItem label="等级：" prop="name" :label-width="90" style="margin-top:2vh;">
          <Input v-model="formItem.name" placeholder="请输入等级"></Input>
        </FormItem>
        <FormItem label="等级名称：" required prop="gradename" :label-width="90" style="margin-top:2vh;">
          <Input v-model="formItem.gradename" type="text" width="200"  placeholder="请输入等级名称"></Input>
        </FormItem>
        <FormItem label="消费次数：" prop="total" :label-width="90" style="margin-top:2vh;">
           <Input v-model="formItem.total" type="text" width="200"  placeholder="请输入消费次数"></Input>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button size="large" type="primary" long @click="Editgrade('formItem')">保存</Button>
      </div>
    </Modal>
 </div>
</template>
<script>
import { fetchgradeList,saveLevelSetting,deletegrade,editegrade, getLevelSetting} from '@/api/grade';
export default {
  name: "Gradesetting",
  data() {
    var validateNumber = (rule, value, callback) => {
      if (value % 1 != 0) {
        callback(new Error("请输入整数"));
      } else {
        callback();
      }
    };
    
    return {
      listdata:[],
      TableLoading: false,
      modal1:false,
      formValidate: {
        statusBoolean:false,
        status: 0,
        accumulateStartDate: '',
        accumulateStartDateStr: '',
        accumulateNearestDays: '',
        supportAccumulateFieldsArray: [],
      },
      ruleValidate: {
        accumulateStartDateStr: [
            { required: true,trigger: "blur" },
            /*{ type: "number", message: "请选择时间", trigger: "blur"}*/
        ],
        accumulateNearestDays: [
          { required: true,message: "请输入天数",trigger: "blur"},
          { type: "number", message: "请输入数字类型的数据", trigger: "blur",validator: validateNumber }
        ],
        gradefield: [
          { required: true,message: "请选择等级计算字段",trigger: "blur"},
        ],
      },
      formItem: {
        name:'',
        gradename: "",
        total:'',
      },
      modalruleValidate: {
        name: [
          { required: true,  trigger: "请输入等级" }
        ],
        gradename: [
            { required: true,trigger: "blur" },
            { type: "text", message: "请输入等级名称", trigger: "blur"}
        ],
        total: [
          { required: true,  message: "请输入消费次数",trigger: "blur" },
          { type: "number", message: "请输入数字类型的消费次数", trigger: "blur",validator: validateNumber}
        ],
      },
       columns7: [
            {
                title: '等级',
                key: 'levelId',
                align: "center",
            },
            {
                title: '等级名称',
                key: 'levelName',
                align: "center",
            },
            {
                title: '消费次数',
                key: 'consumeCount',
                align: "center",
            },
             {
               title: '消费金额',
               key: 'consumeAmount',
               align: "center",
             },
            {
                title: '操作',
                key: 'action',
                width: 150,
                align: 'center',
                render: (h, params) => {
                    return h('div', [
                        h('Button', {
                            props: {
                                type: 'primary',
                                size: 'small'
                            },
                            style: {
                                marginRight: '5px'
                            },
                            on: {
                                click: () => {
                                    this.editOpen(params.row.id)
                                }
                            }
                        }, '修改'),
                        h('Button', {
                            props: {
                                type: 'error',
                                size: 'small'
                            },
                            on: {
                                click: () => {
                                    this.handleRemove(params.row.id);
                                }
                            }
                        }, '删除')
                    ]);
                }
            }
        ],
        data6: [
            /*{
              levelId: '1',
              levelName: '等级1',
              consumeCount: 0,
              consumeAmount: 0
            }*/
        ],
        disabled1:true,
        disabled2:true,
    };
  },
  methods: {
    handleSubmit(name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          this.$Message.success("保存成功!");
        } else {
          this.$Message.error("保存失败!");
        }
      });
    },

    getLevelSetting () {  // 查询等级设置
      this.TableLoading = true;
      var res = {};
      getLevelSetting().then((res)=>{
        this.TableLoading = false;
        if(res.data.code == 200){
          this.formValidate = res.data.data;
          if (this.formValidate.supportAccumulateFields){
            var supportArray = [];
            if (this.formValidate.supportAccumulateFields == 1){
              supportArray = ["1"];
            }else if (this.formValidate.supportAccumulateFields == 2){
              supportArray = ["2"];
            }else if (this.formValidate.supportAccumulateFields == 3){
              supportArray = ["1", "2"];
            }
            this.formValidate.supportAccumulateFieldsArray = supportArray;
          }
          if (this.formValidate.accumulateStartDate){
            this.formValidate.accumulateStartDateStr = '';
          }
          if (this.formValidate.status){
            if (this.formValidate.status == 0){
              this.formValidate.statusBoolean = false;
            }else if (this.formValidate.status == 1){
              this.formValidate.statusBoolean = true;
            }
          }
        }
      }).catch(error=>{
          this.$Message.error("操作失败【" + error + "】");
      })
    },

    FetchgradeList () {  // 查询等级列表
        this.TableLoading = true;
        var res = {};
        fetchgradeList().then((res)=>{
            this.TableLoading = false;
            if(res.data.code == 200){
              this.data6 = res.data.data;
            }
        })
        .catch(error=>{
          this.$Message.error("操作失败【" + error + "】");
      })
    },
    SavegradeList(){   // 保存
        var reqParams = this.formValidate;
        saveLevelSetting(reqParams).then((res)=>{
            if(res.data.code == 200){
                this.$Message.success('修改已生效！')
            }
        })
        .catch(error=>{
          this.$Message.error("操作失败【" + error + "】");
        })
    },
    
    Editgrade(){      // 编辑
        var reqParams = {
            formValidate:this.formValidate,
        };
        editgrade(reqParams).then((res)=>{
            if(res.data.code == 200){
                this.$Message.success('修改成功！')
            }    
        })
        .catch(error=>{
          this.$Message.error("修改失败【" + error + "】");
        }) 
    },
    editOpen(params) {
    //   this.add_info = this.listData[index];
      this.$router.push({path: "/loyalty/editorGrade/"+ params});
    },
    handleRemove (id) {   // 删除
       var my = this;
      this.$Modal.confirm({
        title: "删除确认",
        content: '是否确认删除会员等级',
        onOk: function() {
          //this.$Loading.start();
          deletegrade(id).then((res) => {
            if (res.data.code == 200) {
              this.$Message.info("删除成功！")
              my.FetchgradeList();
            }
          })
          .catch(error=>{
            this.$Message.error("删除失败【" + error + "】");
          })
        }
      });
    },
    Addgrade(){
        this.$router.push({path:'/loyalty/addgrade'})
    }
    
  },
  mounted () {
      this.getLevelSetting();
      this.FetchgradeList();
  }
};
</script>
<style lang="scss" scoped>
@import "../../styles/common.scss";
.gradesetting_container {
  background-color: #fff;
  .nav {
    height: 5vh;
    padding-left: 1vw;
    line-height: 35px;
    .addcustomergroup_title {
        font-size: 1.1rem;
        font-family: Times;
        font-weight: bolder;
    }
  }
  .content_box {
    width: 100%;
    min-height: 70vh;
    .data_range_title {
      @include Integral_title_global;
    }
    .member_box{
        width:80vw;
        min-height:20vh;
        padding:2vh 0px 0px 5vw;
        margin: 0 auto; 
        background-color:#fff;
        margin:1vh 0px 2vh 4vw;
        box-shadow: 0px 0px 4px #f1eded;
    }
    .upgrade_rule {
      .upgrade_rule_title {
        @include Integral_title_global;
      }
    }
  }
}
</style>

